<template>
    <section class="aui-flexView">
        <mt-header  :title=" dataInfo.name ">
            <router-link to="" slot="left">
                <mt-button icon="back" @click.native="$router.back(-1)">返回</mt-button>
            </router-link>
        </mt-header>
        <section class="aui-scrollView">
            <div class="img_gallery" id="commodity" scope="scope">
                <swiper :options="swiperOption" ref="mySwiper">
                    <swiper-slide v-for="(item, index) in dataInfo.tupian" :key="index">
                        <img class="product-image" v-bind:src="item" preview="0">
                    </swiper-slide>
                    <div class="swiper-pagination" slot="pagination"></div>
                </swiper>
            </div>
            <div class="aui-content">
                <div class="aui-product-head aui-footer-flex">
                    <!--<em>最新</em>-->
                </div>
                <div class="aui-product-title">
                    <h2>{{ dataInfo.name }}</h2>
                </div>
                <div class="aui-product-title aui-product-title-text">
                    <h2>{{ dataInfo.jianjie }}</h2>
                </div>
            </div>
        </section>
        <footer class="aui-footer-button aui-footer-flex aui-footer-fixed">
            <div class="aui-footer-group aui-footer-flex1">
                <div class="aui-footer-flex">
                    <div class="aui-btn aui-btn-red" @click="productSubmit">
                        <span>立即秒杀</span>
                    </div>
                </div>
            </div>
        </footer>
    </section>
</template>

<script>
    export default {
        name: "Product",
        components: {
        },
        data() {
            return {
                options: {
                    id: 0
                },
                dataInfo: {},
                swiperOption: {
                    speed: 500,
                    autoplay: true,
                    pagination: {
                        el: '.swiper-pagination'
                    },
                    preloadImages: true,
                    grabCursor: true,
                }
            }
        },
        mounted() {
            this.options.id=this.$route.params.id
            this.getData()
        },
        methods: {
            getData() {
                this.$axios( {
                    method: 'post',
                    url: 'Index/shangpin',
                    data: {
                        cid: this.options.id,
                    }
                } ).then( this.setData ).catch( error => {

                } );
            },
            setData( result ) {
                this.dataInfo=result.data
                this.$previewRefresh()
            },
            productSubmit() {
                this.$router.push( '/productSubmit/' + this.options.id )
            }
        },
    }
</script>

<style scoped>

    .aui-content {
        padding:0 40px;
        margin-bottom:110px;
        margin-top:10px;
        }

    .aui-footer-button {
        position:fixed;
        bottom:0;
        width:100%;
        height:105px;
        padding-top:5px;
        background:#fff;
        }

    .aui-btn {
        z-index:10;
        line-height:80px;
        text-align:center;
        background:linear-gradient(to bottom right, #FF7F53, #FF5B4B);
        color:#FFF;
        font-size:28px;
        border-radius:80px;
        /* cursor: pointer; */
        -webkit-user-select:none;
        width:90%;
        font-weight:bold;
        margin:0 auto;
        }

    .main_img ul li img {
        width:100%;
        height:100%;
        display:block;
        border:none;
        }

    .img_font {
        position:absolute;
        }

    .img_gallery {
        position:relative;
        width:100%;
        overflow:hidden;
        height:640px;
        /*border-bottom:1px solid #e9e9e9;*/
        }

    .aui-product-head em {
        background:#fff0f0;
        color:#ff0000;
        font-size:28px;
        border-radius:20px;
        font-style:normal;
        padding:0 24px;
        height:44px;
        margin:8px 32px 0 0;
        }

    .aui-product-title h2 {
        color:#333;
        font-size:40px;
        line-height:1.5;

        }

    .aui-product-title-text h2 {
        font-weight:normal;
        font-size:32px;
        color:#8a8a8a;
        }

    .aui-product-title-text {}

    .product-image {
        width:100%;
        height:640px;
        }

</style>
